<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./scan.title";
import scanBg from "@/static/images/scan.png";
import useScan from "@/hooks/useScan";
import { useMessage } from "wot-design-uni";
import Spin from "@/components/Spin/index.vue";
import { useScanStore, useToastStore } from "@/store";

const message = useMessage();
const scanStore = useScanStore();
const toastStore = useToastStore();

const currentId = ref();
const currentType = ref();
const currentOutType = ref();

const listenScanRes = (res) => {
	if (!currentId.value) {
		console.log("缺少存储id");
		return;
	}
	if (res) {
		scanStore.set(currentId.value, res);

		if (currentType.value === "shipment") {
			uni.redirectTo({ url: "/pages/shipment/index" });
			return;
		}
		if (currentType.value === "check") {
			uni.redirectTo({ url: "/pages/startCheck/index" });
			return;
		}
		if (currentType.value === "outbound") {
			uni.redirectTo({
				url: `/pages/outbound/index?id=${res}&outType=${currentOutType.value}`,
			});
			return;
		}
		uni.navigateBack();
	}
};

const { loading } = useScan({
	scanCallback: listenScanRes,
	timeOutCallback: () => {
		// message.alert("未识别，请核对条形码是否正确");
		toastStore.set("未识别，请核对条形码是否正确", "warning");
	},
});

onLoad((options) => {
	currentId.value = options.id;
	currentType.value = options.type;

	currentOutType.value = options.outType;

	/* #ifdef H5 */
	listenScanRes(1);

	/* #endif */
});
</script>

<template>
	<ViewContainer :title="titleConfig">
		<view class="scan">
			<Spin :loading="loading">
				<wd-img :src="scanBg" class="scan-img" />
			</Spin>
			<view class="text">{{
				loading ? "扫描中..." : "请按下设备扫描按键进行扫描"
			}}</view>
		</view>
	</ViewContainer>
</template>

<style lang="less" scoped>
.scan {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;

	.scan-img {
		width: 450px;
		height: 300px;
		opacity: 0.5;
	}

	.text {
		text-align: center;
		font-size: 45px;
		color: rgba(0, 0, 0, 0.45);
		white-space: nowrap;
		margin-top: 20px;
	}
}
</style>
